<template>
    <div  >
      <div id="div1">
       <div id="div1_1">
         <el-row :gutter="15">
           <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
             <el-col :span="15">
               <el-form-item label="患者姓名" prop="patient_name">
                 <el-input v-model="formData.patient_name" placeholder="请输入患者姓名" clearable :style="{width: '100%'}">
                 </el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label-width="-1px" label="" prop="field102">
                 <el-button type="primary" @click="button1()" size="medium"> 选择患者 </el-button>
               </el-form-item>
             </el-col>
             <el-col :span="15">
               <el-form-item label="身份证号" prop="patient_idcard">
                 <el-input v-model="formData.card" placeholder="请输入身份证号" clearable :style="{width: '100%'}">
                 </el-input>
               </el-form-item>
             </el-col>
             <el-col :span="15">
               <el-form-item label="性别" prop="patient_sex">
                 <el-radio-group v-model="formData.sex" size="medium">
                   <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                             :disabled="item.disabled">{{item.label}}</el-radio>
                 </el-radio-group>
               </el-form-item>
             </el-col>
             <el-col :span="15">
               <el-form-item label="出生日期" prop="patient_birth">
                 <el-date-picker v-model="formData.birth" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                 :style="{width: '100%'}" placeholder="请选择出生日期" clearable></el-date-picker>
               </el-form-item>
             </el-col>
             <el-col :span="15">
               <el-form-item label="年龄" prop="patient_age">
                 <el-input v-model="formData.age" placeholder="请输入年龄" clearable :style="{width: '100%'}">
                 </el-input>
               </el-form-item>
             </el-col>
             <el-col :span="15">
               <el-form-item label="地址信息" prop="patient_addr">
                 <el-input v-model="formData.address" placeholder="请输入地址信息" clearable :style="{width: '100%'}">
                 </el-input>
               </el-form-item>
             </el-col>
             <el-col :span="15">
               <el-form-item label="过敏史" prop="patient_alle">
                 <el-input v-model="formData.history" placeholder="请输入过敏史" clearable :style="{width: '100%'}">
                 </el-input>
               </el-form-item>
             </el-col>
             <el-col :span="15">
               <el-form-item label="" prop="field113">
                 <el-button type="primary" @click="button2()" size="medium"> 历史病例 </el-button>
               </el-form-item>
             </el-col>
           </el-form>
         </el-row>
       </div>
      </div>

      <!-- 查询数据库所有用户 -->
      <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
        <el-tabs type="border-card">
          <el-tab-pane label="等待就诊">
            <el-table v-loading="loading" :data="guahao"  >
              <el-table-column label="患者姓名" prop="outPatient.patientName" ></el-table-column>
              <el-table-column label="挂单号" prop="registerId" ></el-table-column>
              <el-table-column label="挂号类型" prop="registraFee.registraFeeName"  ></el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="medium"
                    type="primary"
                    icon="el-icon-edit"
                    @click="jiezhen(scope.row)"
                    v-hasPermi="['system:dept:edit']"
                  >接诊</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="正在就诊">
            <el-table v-loading="loading7" :data="guahao7"  >
              <el-table-column label="患者姓名" prop="outPatient.patientName"  ></el-table-column>
              <el-table-column label="挂单号" prop="registerId"  ></el-table-column>
              <el-table-column label="挂号类型" prop="registraFee.registraFeeName"  ></el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="medium"
                    type="primary"
                    icon="el-icon-edit"
                    @click="zairu(scope.row)"
                    v-hasPermi="['system:dept:edit']"
                  >载入</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

        </el-tabs>

      </el-dialog>

      <!-- 查询患者的历史病例-->
      <el-dialog :title="title2" :visible.sync="open2" width="1000px" append-to-body>
        <el-table v-loading="loading2" :data="table2"  >
          <el-table-column label="诊断信息" prop="diagnosis"  width="200"></el-table-column>
          <el-table-column label="发病日期" prop="date"  width="200"></el-table-column>
          <el-table-column label="病人描述" prop="discribe"  width="200"></el-table-column>
          <el-table-column label="医生建议" prop="proposal"  width="200"></el-table-column>
          <el-table-column label="是否是传染病" prop="contagion"  width="200" :formatter="statusFormat" ></el-table-column>

        </el-table>
      </el-dialog>
      <div id="div2">
        <div id="div2_1">
          <span>挂号单ID:</span><span id="span1" >{{guahaonumber}}</span><br>
          <span>病例编号:</span><span id="span2">{{binglinumber}}</span></div>
        <div id="div2_2">
          <el-button type="primary" @click="baocun()">保存病例</el-button>
          <el-button type="danger"  @click="jiuzhenwancheng()">就诊完成</el-button>
        </div>
      </div>
      <div id="div3">
        <el-tabs type="border-card">
          <el-tab-pane label="病例">
            <div>
          <!--   添加病例的form表单   -->
              <el-row :gutter="15">
                <el-form ref="aaa" :model="bingli" :rules="rules" size="medium" label-width="100px">
                  <el-col :span="8">
                    <el-form-item label="发病日期" prop="date">
                      <el-date-picker type="datetime" v-model="bingli.date" format="yyyy-MM-dd HH:mm:ss"
                          value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择发病日期" clearable>
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="诊断类型" prop="type">
                      <el-select v-model="bingli.type" placeholder="请选择诊断类型" clearable :style="{width: '100%'}">
                        <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
                                   :value="item.value" :disabled="item.disabled"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="是否传染" prop="contagion">
                      <el-select v-model="bingli.contagion" placeholder="请选择是否传染" clearable :style="{width: '100%'}">
                        <el-option v-for="(item, index) in contagionOptions" :key="index" :label="item.label"
                                   :value="item.value" :disabled="item.disabled"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="主诉" prop="discribe">
                      <el-input v-model="bingli.discribe" type="textarea" placeholder="请输入主诉"
                                :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="诊断信息" prop="diagnosis">
                      <el-input v-model="bingli.diagnosis" type="textarea" placeholder="请输入诊断信息"
                                :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="医生建议" prop="proposal">
                      <el-input v-model="bingli.proposal" type="textarea" placeholder="请输入医生建议"
                                :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="医生备注" prop="doctorRemark">
                      <el-input v-model="bingli.doctorRemark" type="textarea" placeholder="请输入医生备注"
                                :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                    </el-form-item>
                  </el-col>

                </el-form>
              </el-row>

            </div>
          </el-tab-pane>
          <el-tab-pane label="处方">
            <div>
              <el-button @click="chouti1()" icon="el-icon-plus" type="success">添加药用处方</el-button>

              <el-drawer
                title="药用项目"
                :visible.sync="drawer1"
                :direction="direction1"
                ref="nevDrawer"
                :before-close="handleClose">
                <el-table v-loading="loading3" :data="table3" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" align="center" />
                  <el-table-column label="药品ID" align="center" prop="id" />
                  <el-table-column label="药品名称" align="center" prop="name" />
                  <el-table-column label="库存量" align="center" prop="number" />
                  <el-table-column label="单位" align="center" prop="unit" />
                  <el-table-column label="换算量" align="center" prop="convert" />
                </el-table>
                <div>
                 <el-button id="choutianniu1" @click="button4()" type="primary">添加并关闭</el-button>
                </div>

<!--                显示病例所选药品的表格-->
                <el-dialog :title="title5" :visible.sync="open5" width="1000px"  append-to-body>
                  <el-button icon="el-icon-plus" @click="button5()" type="success">确定添加</el-button>
                  <div style="font-size: 20px ">所选药品总共需要<font class="font1">{{props.num}}</font>元</div>
                  <el-table v-loading="loading5" :data="table5"  >
                    <el-table-column label="序号" prop="id"  ></el-table-column>
                    <el-table-column label="药品名字" prop="name"  ></el-table-column>
                    <el-table-column  label="数量" align="center" width="150px" prop="jishuqi" >
                      <template slot-scope="scope">
                        <el-input-number
                          v-model="scope.row.jishuqi"
                          size="mini"
                          :min="1"
                          :max="20"
                          @change="handleChange(scope.row)"
                          label="描述文字"
                        ></el-input-number>
                      </template>
                    </el-table-column>
                    <el-table-column label="单价(元)"  prop="otcPrice"  ></el-table-column>
                    <el-table-column label="金额(元)"  prop="sum"  >
                      <template slot-scope="scope">
                        <div @change="sumqiuhe(scope.row)">{{scope.row.sum}}</div>
                      </template>
<!--                      <template slot-scope="scope" >-->
<!--                        <p v-html="scope.row.otcPrice*scope.row.jishuqi"></p>-->
<!--                      </template>-->
                    </el-table-column>
                    <el-table-column label="服用备注"  prop="fuyongbeizhu"  >
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.fuyongbeizhu" />
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="text"
                          icon="el-icon-delete"
                          @click="handleDelete(scope.row)"
                        >删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-dialog>

              </el-drawer>


              &nbsp; &nbsp; &nbsp;
              <el-button  @click="chouti2()"  icon="el-icon-plus" type="success">添加检查处方</el-button>
              <el-drawer
                title="检查项目"
                :visible.sync="drawer2"
                :direction="direction2">

                <el-dialog :title="title4" :visible.sync="open4" width="1000px" append-to-body>
                  <el-table v-loading="loading4" :data="table4"  >

                  </el-table>
                </el-dialog>


              </el-drawer>
            </div>


            <el-collapse v-model="activeName" accordion>
              <el-collapse-item  name="1">
                <template slot="title">
                  【药品处方】【1】【处方总额】:￥<font class="font1">{{this.props.num}}</font>
                </template>
                <el-table id="table" v-loading="loading6" :data="table6" >
                  <el-table-column label="药品ID" align="center" prop="id" />
                  <el-table-column label="药品名称" align="center" prop="name" />
                  <el-table-column label="数量" align="center" prop="jishuqi" />
                  <el-table-column label="单价" align="center" prop="otcPrice" />
                  <el-table-column label="总额" align="center" prop="sum" />
                  <el-table-column label="服用备注" align="center" prop="fuyongbeizhu" />
                  <el-table-column label="状态" align="center" prop="zhifuzhuangtai" />
                </el-table>
              </el-collapse-item>
              <el-collapse-item  name="2">
                <template slot="title">
                  【检查处方】【2】【处方总额】:￥<font class="font1">0</font>
                </template>
                <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
              </el-collapse-item>
            </el-collapse>




          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

</template>

<script>
    import { listRegister,modifyRegisterBystatus,addCase,listbingli,addjiuzhen,getPost } from "@/api/outpatient/newvisit";
    import {listPost} from "@/api/hissystem/department.js";
    export default {
        components: {},
        props: [],
        data() {
            return {
                  //设置折叠面板手风琴风格
                activeName: '1',
                formData: {
                    name: undefined,
                    card: undefined,
                    sex: 0,
                    birth: null,
                    age: undefined,
                    address: undefined,
                    history: undefined,
                    field113: undefined,
                },
                bingli: {
                    id: 0,
                    date: null,
                    type: undefined,
                    contagion: undefined,
                    discribe: undefined,
                    diagnosis: undefined,
                    proposal: undefined,
                    doctorRemark: undefined,
                    huanzheid:undefined,
                },
                // 状态数据字典
                chuanranbingOptions: [],
                // 遮罩层
                loading: true,

                title: "挂号",
                rules: {
                    date: [],
                    type: [],
                    contagion: [],
                    discribe: [],
                    diagnosis: [],
                    proposal: [],
                    doctorRemark: [],
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入患者姓名',
                        trigger: 'blur'
                    }],
                    card: [{
                        required: true,
                        message: '请输入身份证号',
                        trigger: 'blur'
                    }],
                    sex: [{
                        required: true,
                        message: '性别不能为空',
                        trigger: 'change'
                    }],
                    birth: [{
                        required: true,
                        message: '请选择出生日期',
                        trigger: 'change'
                    }],
                    age: [{
                        required: true,
                        message: '请输入年龄',
                        trigger: 'blur'
                    }],
                    address: [{
                        required: true,
                        message: '请输入地址信息',
                        trigger: 'blur'
                    }],
                    history: [{
                        required: true,
                        message: '请输入过敏史',
                        trigger: 'blur'
                    }],
                },
                //是否显示弹出层
                open:false,
                //点击选择患者 默认发送的status状态为待就诊的用户
                queryParams:{
                    status: 0,
                },
                typeOptions: [{
                    "label": "初诊",
                    "value": 0
                }, {
                    "label": "复诊",
                    "value": 1
                }],
                contagionOptions: [{
                    "label": "否",
                    "value": 0
                }, {
                    "label": "是",
                    "value": 1
                }],
                sexOptions: [{
                    "label": "男",
                    "value": 0
                }, {
                    "label": "女",
                    "value": 1
                }, {
                    "label": "未知",
                    "value": 2
                }],
                //选择患者的表格
                guahao:[],
                //挂号单ID的显示
                guahaonumber:"选中患者后显示",
                binglinumber:"保存病例后显示",
                //历史病例的表格信息， 标题  是否打开  是否有遮罩层, 表格定义
                title2:"历史病例",
                open2:false,
                loading2:true,
                table2:[],
                //药用处方的抽屉
                drawer1: false,
                direction1: 'rtl',
                //检查处方的抽屉
                drawer2: false,
                direction2: 'rtl',
                //药用信息的表格
                title3:"表格信息",
                open3:false,
                loading3:true,
                table3:[],
                //检查处方的表格
                title4:"表格信息",
                open4:false,
                loading4:true,
                table4:[],
                //检查处方的表格
                title5:"表格信息",
                open5:false,
                loading5:true,
                table5:[],
                //所选内容的表格
                loading6:false,
                table6:[],
                //正在就诊的信息表格
                loading7:false,
                guahao7:[],
                //表格多选选中数据
                // 选中数组
                ids1: [],
                // 非单个禁用
                single1: true,
                // 非多个禁用
                multiple1: true,
                props: {
                    num :0,
                    yuanlaidedanjia:{
                        type: Array,
                        default: ()=>[]
                    },
                }
            }
        },
        computed: {},
        watch: {},
        created() {
            this.getDicts("doctor_newvisit_infectiousDiseases").then(response => {
                this.chuanranbingOptions = response.data;
            });
          listPost().then(response => {
                console.log(response.rows);
                this.table3=response.rows;
            });
            //给数组赋初值
            for (var i=0;i<100;i++){
                this.props.yuanlaidedanjia[i]=0;
            }
        },
        mounted() {},
        methods: {
            sumqiuhe(value){
                console.log("值的变化"+value);
              this.num=this.num+value;
            },
            handleChange(value){
                //arr.splice(arr.indexOf(ele),length)
                var ceshi = this.table5[this.table5.indexOf(value)];
                ceshi.sum= ceshi.jishuqi*ceshi.otcPrice;

                this.props.num =this.props.num - this.props.yuanlaidedanjia[ceshi.id] +ceshi.sum;

                this.props.yuanlaidedanjia[ceshi.id]=ceshi.sum;
            },
            change(e){
                this.$forceUpdate(); // @change="forceUpdate($event)"主要是解决clear图标响应问题
            },

            //关闭抽屉
            handleClose:function(done) {
                        done();
            },
            // 是否是传染病字典翻译
            statusFormat(row, column) {
                return this.selectDictLabel(this.chuanranbingOptions, row.contagion);
            },
            //点击查询所有等待就诊信息和就诊信息
            button1: function () {
                this.open=true;
                listRegister(this.queryParams).then(response => {
                    console.log(response.data);
                    this.guahao=response.data;
                    this.loading=false;
                });
                listRegister({status:1}).then(response => {
                    console.log(response.data);
                    this.guahao7=response.data;
                    this.loading7=false;
                });
            },
            //点击查询该用户所有的历史病例
            button2: function(){
                this.open2=true;
                listbingli({id:this.bingli.huanzheid}).then(response =>{
                    this.table2=response.data;
                    this.loading2=false;
                })
            },
            //点击查询该用户的所有药品
            button3:function(){
                this.loading3=false;
            },
            //药品选择完毕  关闭选择框
            button4:function(done){
                //关闭抽屉
               this.$refs.nevDrawer.closeDrawer();
               this.open5=true;   //打开表格
               this.table5=this.ids1;  //给表格赋值
                //药品计算总量的数字初始化
                this.chushihuacheliang();
               this.ids1.forEach((e,i)=>{
                   //this.$set(e,{"jishuqi": 1,fuyongbeizhu:""});
                       this.$set(e,"jishuqi",1);
                       this.$set(e,"fuyongbeizhu","无");
                       this.$set(e,"sum",0);
                       this.$set(e,"zhifuzhuangtai","未支付");
                   //下面这个在VUE实例创建时，属性不会声明 不是响应式属性，
                 //  Object.assign(e,{count:1,fuyongbeizhu:"多喝热水"})
                  // e.jishuqi=1;
                   e.sum=e.jishuqi*e.otcPrice;
                   this.props.num=this.props.num+e.sum;
                   this.props.yuanlaidedanjia[e.id]=e.sum;
               })
               this.loading5=false;
            },
            button5:function(){
              this.table6=this.table5;
              this.open5=false;
              console.log(this.table6);
            },
            chouti1:function(){
              this.drawer1=true;
              this.loading3=false;
            },
            chouti2:function(){
                this.drawer2=true;
            },
            //初始化总额栏
            chushihuacheliang:function(){
                this.props.num=0;
                for (var i=0;i<100;i++){
                    this.props.yuanlaidedanjia[i]=0;
                }
            },
            //选择确诊用户
            jiezhen: function (row) {
                this.open=false;
                //发送ajax请求将就诊状态更改为正在就诊
                //测试的时候要不然太麻烦了 手动取消一下
                this.xiugaizhuangtai(row.id,2);
                this.guahaonumber=row.number;
                this.formData=row.patient;
                if(row.patient.sex=='男'){
                    this.formData.sex=0;
                }else if(row.patient.sex=='女'){
                    this.formData.sex=1;
                }else{
                    this.formData.sex=2;
                }
                this.bingli.huanzheid=row.id;
              console.log(row);
            },
            //载入信息
          /** 修改按钮操作 */
          // 表单重置
          reset() {
            this.form = {
              id:undefined,
              name: undefined,
              card: undefined,
              sex: 0,
              birth: null,
              age: undefined,
              address: undefined,
              history: undefined,
              field113: undefined,
            };
            this.resetForm("form");
          },
          zairu(row) {
            this.reset();
            const postId = row.id || this.ids
            getPost(postId).then(response => {
              this.form = response.data;
              this.open = true;
              this.title = "修改岗位";
            });
          },
            xiugaizhuangtai:function(id,status){
                modifyRegisterBystatus({id:id,status:status})
            },
            baocun:function () {
                alert(this.bingli.huanzheid);
                addCase(this.bingli).then(response=>{
                    if(response.flag==1){
                        alert("保存成功");
                        this.binglinumber=response.bianhao;
                    }
                })
            },
            jiuzhenwancheng:function(){

                addjiuzhen(this.table6,"jimo");
               // this.$axios.post({
               //     methed:'post',
               //     url: 'http://localhost:8080/doctor/newvisit/addjiuzhen',
               //     data:{
               //         list: this.table6,
               //         sss: 'jimo',
               //     }
               // })
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids1 = selection;
                this.single1 = selection.length!=1;
                this.multiple1 = !selection.length;
            },
            handleDelete:function (row) {
                //arr.splice(arr.indexOf(ele),length): 先找到对应数据下标，然后删除长度为几的元素
                this.ids1.splice(this.ids1.indexOf(row),1);
                this.props.num=this.props.num-this.props.yuanlaidedanjia[row.id];
            },
        }
    }

</script>

<style scoped>
    #div1{
      width: 500px;

      display:inline-block;
      position: absolute;
      left: 60px;
      top: 20px;
      box-shadow:0px 0px 10px #dddddd;
    }
    #div1_1{
      position: relative;
      left: 20px;
      top: 20px;
    }
  #div2{

    width: 900px;
    height: 100px;
    position: absolute;
    left: 600px;
    top: 20px;
    box-shadow:0px 0px 10px #dddddd;
  }
  #div3{
    width: 900px;
    height: 600px;

    position: absolute;
    left: 600px;
    top: 150px;
    box-shadow:0px 0px 10px #dddddd;
  }
    #div2_1{
      width: 300px;
      height: 100%;
      margin-top: 25px;
      margin-left: 20px;
      float: left;

    }
    #div2_2{
      width: 300px;
      height: 100%;
      margin-top: 25px;
      float: right;
    }
  #span1{
    color: red;
  }
  #span2{
    color: blue;
  }
  #choutianniu1{
    position: absolute;
    left: 260px;
    top: 300px;
  }
  .font1{
    color: red;
  }
</style>
